
import { Divider, Input, Select } from "antd";
import { SyntheticEvent, useEffect, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { $eventBus } from "../../../../common/utils";
import lessModule from "./index.module.less"

// 主页-系统配置页面-头部菜单-tab组件
interface systemConfigurationPageHeaderMenuComponentTabComponentPropsInterface {
    get_tabName: Function
}
const SystemConfigurationPage_HeaderMenuComponent_TabComponent: React.FC<systemConfigurationPageHeaderMenuComponentTabComponentPropsInterface> = (props) => {
    const navigate = useNavigate();
    const tabList = [{ name: "操作日志", routerName: "operationLog" }, { name: "账号管理", routerName: "accountManagement" }]
    const [tabName, setTabName] = useState<string>(tabList[0].name)

    const click_tab = (tabData: object) => {
        setTabName(tabData["name"])
        props.get_tabName(tabData["name"])
        navigate(`/home/systemConfiguration/${tabData["routerName"]}`)
    }

    const locationData = useLocation()
    const init_tabName = () => {
        const tempTabName = tabList.find((item) => !locationData.pathname.split("/")[3] || item.routerName === locationData.pathname.split("/")[3])?.name ?? ""
        setTabName(tempTabName)
        props.get_tabName(tempTabName)
    }
    useEffect(() => {
        init_tabName()
    }, [])
    return (
        <div className={`${lessModule["homePageSystemConfigurationPage-systemConfigurationPageHeaderMenuComponent__systemConfigurationPageHeaderMenuComponentTabComponent"]}`}>
            {tabList.map((item, idx) => {
                return (
                    <div className={`${lessModule["systemConfigurationPageHeaderMenuComponent-systemConfigurationPageHeaderMenuComponentTabComponent__tabItem"]}`}
                        style={{
                            padding: tabName === item.name ? "10px 8px 10px 7px" : "10px 7px 10px 8px", color: tabName === item.name ? "#FFFFFF" : "#B8D6E6",
                            borderWidth: tabName === item.name ? " 0 0 1px 0" : "1px", borderColor: tabName === item.name ? "#17A1E6" : "rgba(23,161,230,0.3)",
                            backgroundColor: tabName === item.name ? "rgba(23,161,230,0.5)" : "rgba(23,161,230,0.1)"
                        }}
                        key={'tabList' + idx} onClick={() => tabName !== item.name && click_tab(item)}>
                        {item.name}
                    </div>
                )
            }
            )}

        </div>
    )
}

// 主页-系统配置页面-头部菜单-操作组件
const SystemConfigurationPage_HeaderMenuComponent_OperationComponent: React.FC = () => {
    const [isSearch, setIsSearch] = useState<boolean>(false)
    const [paramsData, setParamsData] = useState<object>({})
    const powerList = [{ name: "121" }]
    const click_isSearchOpen = () => {
        setIsSearch(true)
    }
    const click_addAccount = () => {
        $eventBus.emit("eventBus_homePageSystemConfigurationPageAccountManagementPageModalData", { typeName: "新建账号" })
    }
    const change_accountName = (data: SyntheticEvent) => {
        setParamsData({ ...paramsData, ...{ accountName: data.target["value"] } })
    }
    const change_powerName = (value: string) => {
        setParamsData({ ...paramsData, ...{ powerName: value } })
    }
    const click_isSearchClose = () => {
        setIsSearch(false)
    }
    const click_search = () => {
        // $eventBus.
        click_isSearchClose()
    }
    return (
        <div className={`${lessModule["homePageSystemConfigurationPage-systemConfigurationPageHeaderMenuComponent__systemConfigurationPageHeaderMenuComponentOperationComponent"]}`}>
            <>
                {
                    !isSearch && <>
                        <div className={`${lessModule["systemConfigurationPageHeaderMenuComponent-systemConfigurationPageHeaderMenuComponentOperationComponent__btn"]} 
                    ${lessModule["systemConfigurationPageHeaderMenuComponent-systemConfigurationPageHeaderMenuComponentOperationComponent__btnLeft"]}`} onClick={() => click_isSearchOpen()}>查询账号</div>
                        <div className={`${lessModule["systemConfigurationPageHeaderMenuComponent-systemConfigurationPageHeaderMenuComponentOperationComponent__btn"]} 
                    ${lessModule["systemConfigurationPageHeaderMenuComponent-systemConfigurationPageHeaderMenuComponentOperationComponent__btnRight"]}`} onClick={() => click_addAccount()}>新建账号</div>
                    </>
                }
            </>
            <>
                {
                    isSearch && <>
                        <div className={`${lessModule["systemConfigurationPageHeaderMenuComponent-systemConfigurationPageHeaderMenuComponentOperationComponent__block"]}`}>
                            <span>账号名/ID：</span>
                            <Input placeholder="请输入" autoComplete="off" onChange={change_accountName} />
                        </div>
                        <div className={`${lessModule["systemConfigurationPageHeaderMenuComponent-systemConfigurationPageHeaderMenuComponentOperationComponent__block"]}`}>
                            <span>权限：</span>
                            <Select
                                popupClassName="systemConfigurationPageHeaderMenuComponentOperationComponent-block__selectDropdown"
                                placeholder="请选择"
                                options={powerList}
                                onChange={change_powerName}
                                fieldNames={{ label: "name", value: "name" }}
                            />
                              <Divider className={`${lessModule["systemConfigurationPageHeaderMenuComponentOperationComponent-block__divider"]}`} type="vertical" />
                        </div>
                        <div className={`${lessModule["systemConfigurationPageHeaderMenuComponent-systemConfigurationPageHeaderMenuComponentOperationComponent__btn"]} 
                                ${lessModule["systemConfigurationPageHeaderMenuComponent-systemConfigurationPageHeaderMenuComponentOperationComponent__btnLeft"]}`} onClick={() => click_isSearchClose()}>取消</div>
                        <div className={`${lessModule["systemConfigurationPageHeaderMenuComponent-systemConfigurationPageHeaderMenuComponentOperationComponent__btn"]} 
                                ${lessModule["systemConfigurationPageHeaderMenuComponent-systemConfigurationPageHeaderMenuComponentOperationComponent__btnRight"]}`} onClick={() => click_search()}>查询</div>
                    </>
                }
            </>
        </div>
    )
}

// 主页-系统配置页面-头部菜单
const SystemConfigurationPage_HeaderMenuComponent: React.FC = () => {
    const [tabName, setTabName] = useState<string>("")
    const get_tabName = (tabName: string) => {
        setTabName(tabName)
    }
    return (
        <div className={`${lessModule["homePageSystemConfigurationPage-systemConfigurationPageHeaderMenuComponent"]}`}>
            <SystemConfigurationPage_HeaderMenuComponent_TabComponent get_tabName={get_tabName} />
            <>
                {
                    tabName === "账号管理" && <SystemConfigurationPage_HeaderMenuComponent_OperationComponent />
                }
            </>
        </div>
    )
}

// 主页-系统配置页面
const HomePage_SystemConfigurationPage: React.FC = () => {
    return (
        <div className={`${lessModule["homePageSystemConfigurationPage"]}`}>
            <SystemConfigurationPage_HeaderMenuComponent />
            <div className={`${lessModule["homePageSystemConfigurationPage-outlet"]}`}>
                <Outlet />
            </div>
        </div>
    )
}
export default HomePage_SystemConfigurationPage